<template>
    <div>
        
		<el-form :model="form" :rules="rules" label-position="right" ref="form" label-width="160px">
		
		   <!--下拉框选择示例-->
            <el-form-item label="菜单级别：" prop="level">
                <el-col :span="15">
                    <el-radio v-model="form.level" label="0" @change="parentMenuChanges">一级菜单</el-radio>
                    <el-radio v-model="form.level" label="1" @change="parentMenuChanges">子级菜单</el-radio>
                </el-col>
            </el-form-item>
            <el-form-item label="父菜单：" prop="father" v-show="form.level != 0">
                <el-col :span="8">
                    <el-cascader
                            placeholder="选择父菜单"
                            v-model="form.father"
                            :options="temporaryFatherData"
                            change-on-select
                            :props="props">
                    </el-cascader>
                </el-col>
            </el-form-item>
		   
		   <!--单行录入示例-->
		   <el-form-item label="菜单名称：" prop="name">
		       <el-col :span="8">
		           <el-input v-model="form.name" placeholder="请输入菜单名称"></el-input>
		       </el-col>
		   </el-form-item>
		   <el-form-item label="跳转地址：" prop="urls">
		       <el-col :span="8">
		           <el-input v-model="form.urls" placeholder="请输入跳转地址"></el-input>
		       </el-col>
		   </el-form-item>
		   
		   <!--提交按钮-->
		   <el-form-item>
			   <el-button type="primary" @click="submitForm('form')">提交</el-button>
			   <!--<el-button @click="resetForm">重置</el-button>-->
		   </el-form-item>
   
		</el-form>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {
            	//验证规则
				rules : {
				   name : [
					   { required: true, message: '请输入菜单名称', trigger: 'blur' }
				   ],
				   urls : [
					   { required: true, message: '请输入跳转地址', trigger: 'blur' }
				   ],
				},
                props: {
                    value: 'value'
                },
                tempDatas : {},
            }
        },
        //初始化函数
        mounted() {
            this.initListData();
            this.initData();
        },
        //计算属性
        computed: {
            // ...mapState({ })
            ...mapState({
				form : state => state.EditBottomMenuModule.form,
				temporaryFatherData : state => state.EditBottomMenuModule.temporaryFatherData
			})
        },
        //组件方法
        methods: {
            // ...mapMutations()
            //数据获取
            initListData(){
                //获取菜单列表信息
                this.$myLoading.startLoading()
                this.$http.getHttp(this.$API.searchBottomMenu + "/skip/0/limit/1000", rs => {
                    this.$myLoading.endLoading()
                    this.$store.commit('EditBottomMenuModule/updateTemporaryFatherData',this.$common.arrayBottomMenu(rs.data))
                });
            },
            //数据获取
            initData(){
              
                //获取菜单列表信息
                this.$myLoading.startLoading()
                this.$http.getHttp(this.$API.searchBottomMenu + "/cbm_id/" + this.$route.query.cbm_id, rs => {
                	this.tempDatas = rs.data[0];
                    this.$store.commit('EditBottomMenuModule/udpateForm',rs.data[0])
                    this.$myLoading.endLoading()
                });
            },
            //添加按钮
			submitForm(form){
				
                this.$refs[form].validate((valid) => {

                    if (valid) {

						if(this.form.level == 0){
							this.form.father = ['0'];
						}
						
						for(var ss=0;ss<this.form.father.length;ss++){
							if(this.form.father[ss] == ''){
								this.form.father.splice(ss,1);
							}
						}
						
						var fidStr = this.form.father.join(',');
						
                        var params = {
                            update_where    : 'cbm_id',
                            cbm_id			: this.$route.query.cbm_id,
							cbm_fid			: this.form.father[this.form.father.length-1],
							cbm_fid_path	: fidStr + ",",
							cbm_name		: this.form.name,
							cbm_url			: this.form.urls,
                        }
                        
                        console.log(params)
//                      return;

                        this.$myLoading.startLoading();

                        this.$http.postHttp(this.$API.updateBottomMenu, params , rs => {

                            this.$myLoading.endLoading();
                            this.$myPop.SuccessMessage();
                            
                            setTimeout(()=>{
                                history.go(-1)
                            },1000);
                            

                            
                        });

                    }

                })
                
				
			},
			//重置按钮
			resetForm(){
                this.$store.commit('EditBottomMenuModule/udpateForm',this.tempDatas)
			},

            //开启三级联动 选择父级菜单
            parentMenuChanges(){
            	console.log(this.form.level)
            	if(this.form.level == 0){
            		
            	}else{
            		
            	}
			},

        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
</style>